<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-problemType="{scope}">
				{{ scope.row.categoryId }}
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
			<template #table-column-content="{scope}">
				<div v-html="scope.row.content"></div>
			</template>
			<template #slot-delete="{scope}">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
			<template #slot-add-type>
				<el-button @click="open" plain type="primary" size="small" style="margin-left:20px">
					新建类型
				</el-button>
			</template>
		</cl-crud>
		<add-type ref="add-types" @new-type="val => crud.refresh()"></add-type>
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import addType from './components/add-type';
import stores from '@/utils/store';
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			options: []
		};
	},
	mixins: [platform],
	components: {
		addType
	},
	methods: {
		open() {
			this.$refs['add-types'].selectType();
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.FAQMenagement.faqCategory)
				.set('dict', {
					label: {
						delete: '批量删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '分类名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'name',
							label: '问题类型',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '问题类型名称'
								}
							},
							rules: {
								required: true,
								message: '问题类型名称'
							}
						},
						{
							label: '图标',
							prop: 'icon',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: false,
								message: '图标'
							}
						},
						{
							label: '是否启用',
							prop: 'status',
							component: {
								name: 'el-switch2',
								data() {
									return {
										value2: ''
									};
								},
								props: {
									value: [String, Number]
								},
								watch: {
									value(val) {
										console.log(val);
										this.value2 = val == 1 ? true : false;
									}
								},
								mounted() {
									console.log(this.value);
								},
								methods: {
									change(val) {
										console.log(val);
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<el-switch
											on-change={this.change}
											v-model={this.value2}></el-switch>
									);
								}
							}
						}
					]
				})
				.on('submit', async (isEdit, data, { next }) => {
					let status = data.status ? '1' : '0';
					delete data.status;
					if (isEdit) {
						delete data.createTime;
						delete data.updateTime;
						next({
							...data,
							status,
							app: stores.get('platForm') || 'yzf'
						});
					} else {
						next({
							...data,
							status,
							app: stores.get('platForm') || 'yzf'
						});
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-add-type', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped>
.sales-top {
	color: red;
}

.sales-bottom {
	color: green;
}
</style>

<style lang="stylus"></style>
